<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Avatar } from 'ant-design-vue'
import { useAuthStore } from '@/stores/auth'
import { BlurGradientBg } from '@/assets/jsm/BlurGradientBg.module.js'

const router = useRouter()
const authStore = useAuthStore()

// 计算当前路由是否为登录注册页面
const isAuthPage = computed(() => {
	const route = router.currentRoute.value
	return route.path === '/auth' || route.path === '/login' || route.path === '/register'
})

// 控制侧边栏展开/收起状态
const sidebarCollapsed = ref(false)

// 响应式屏幕宽度检测
const isMobile = ref(false)

// 防抖处理的屏幕宽度检测
let resizeTimer = null
const checkScreenSize = () => {
	if (resizeTimer) {
		clearTimeout(resizeTimer)
	}
	resizeTimer = setTimeout(() => {
		const newIsMobile = window.innerWidth < 768
		if (newIsMobile !== isMobile.value) {
			isMobile.value = newIsMobile
			// 触发重新布局
			nextTick(() => {
				if (!isMobile.value) {
					// 桌面端重新初始化布局
					initializeDesktopLayout()
				} else {
					// 移动端清除所有JavaScript样式，让CSS媒体查询生效
					clearLayoutStyles()
				}
			})
		}
	}, 150) // 150ms防抖，稍微长一点以减少频繁触发
}

// 切换侧边栏状态 - 优化版本，支持更健壮的布局控制
const toggleSidebar = () => {
	// 移动端不执行侧边栏切换逻辑
	if (isMobile.value || window.innerWidth < 768) return

	// 切换折叠状态
	sidebarCollapsed.value = !sidebarCollapsed.value

	// 根据新的折叠状态计算宽度
	const newWidth = sidebarCollapsed.value
		? 'calc(100vw - 60px)' // 折叠后的宽度
		: 'calc(100vw - 210px)' // 展开后的宽度

	// 获取并更新content容器
	const contentElement = document.getElementsByClassName('content')[0]
	if (contentElement) {
		Object.assign(contentElement.style, {
			width: newWidth,
			transition: 'width 0.3s ease',
		})
	}

	// 获取并更新所有page-container容器（排除聊天页面）
	const pageElements = document.getElementsByClassName('page-container')
	if (pageElements.length > 0) {
		Array.from(pageElements).forEach(element => {
			// 排除聊天页面，聊天页面应该全屏显示
			if (!element.classList.contains('chat-page')) {
				element.style.setProperty('max-width', newWidth, 'important')
				element.style.setProperty('transition', 'max-width 0.3s ease', 'important')
			}
		})
	}

	console.log(`侧边栏${sidebarCollapsed.value ? '已折叠' : '已展开'}，容器宽度调整为：${newWidth}`)
}

// 清除所有布局样式，让CSS媒体查询生效
const clearLayoutStyles = () => {
	// 清除content容器的样式
	const contentElement = document.getElementsByClassName('content')[0]
	if (contentElement) {
		contentElement.style.removeProperty('width')
	}

	// 清除所有page-container容器的样式（排除聊天页面）
	const pageElements = document.getElementsByClassName('page-container')
	if (pageElements.length > 0) {
		Array.from(pageElements).forEach(element => {
			// 排除聊天页面，聊天页面保持全屏
			if (!element.classList.contains('chat-page')) {
				element.style.removeProperty('max-width')
				element.style.removeProperty('transition')
			}
		})
	}
}

// 桌面端布局初始化
const initializeDesktopLayout = () => {
	// 移动端不需要初始化宽度，清除所有JavaScript设置的样式，使用CSS媒体查询控制
	if (isMobile.value || window.innerWidth < 768) {
		console.log('移动端模式，清除JavaScript宽度控制，使用CSS媒体查询')
		clearLayoutStyles()
		return
	}

	// 桌面端初始化布局宽度（默认为展开状态）
	const initialWidth = sidebarCollapsed.value ? 'calc(100vw - 60px)' : 'calc(100vw - 210px)'

	// 初始化content容器
	const contentElement = document.getElementsByClassName('content')[0]
	if (contentElement) {
		contentElement.style.width = initialWidth
		contentElement.style.transition = 'width 0.3s ease'
	}

	// 初始化所有page-container容器（排除聊天页面）
	const pageElements = document.getElementsByClassName('page-container')
	if (pageElements.length > 0) {
		Array.from(pageElements).forEach(element => {
			// 排除聊天页面，聊天页面应该全屏显示
			if (!element.classList.contains('chat-page')) {
				element.style.setProperty('max-width', initialWidth, 'important')
				element.style.setProperty('transition', 'max-width 0.3s ease', 'important')
			}
		})
	}

	console.log('桌面端布局初始化完成，容器宽度设置为：', initialWidth)
}

// 监听路由变化，确保页面切换时布局正确
watch(
	() => router.currentRoute.value.path,
	() => {
		// 延迟一点时间确保新页面的DOM已经渲染
		setTimeout(() => {
			// 只在桌面端初始化布局
			if (!isMobile.value) {
				initializeDesktopLayout()
			}
		}, 50)
	},
	{ immediate: false }
)

// 监听侧边栏状态变化，确保所有页面元素都能及时响应
watch(sidebarCollapsed, () => {
	// 延迟一点时间，确保DOM已经更新
	setTimeout(() => {
		if (!isMobile.value) {
			initializeDesktopLayout()
		}
	}, 100)
})

// 组件挂载时初始化布局
onMounted(() => {
	// 检测屏幕尺寸并添加监听器
	checkScreenSize()
	window.addEventListener('resize', checkScreenSize, { passive: true })

	// 等待DOM完全渲染后再执行初始化
	nextTick(() => {
		initializeDesktopLayout()
	})
})

// 组件卸载时移除监听器
onUnmounted(() => {
	window.removeEventListener('resize', checkScreenSize)
	if (resizeTimer) {
		clearTimeout(resizeTimer)
	}
})

/**
 * 处理用户链接点击事件
 * 检查登录状态并进行相应跳转
 */
const handleUserLinkClick = () => {
	// 检查是否已登录
	if (authStore.isAuthenticated) {
		// 已登录，跳转到用户中心
		router.push('/profile')
	} else {
		// 未登录，跳转到登录页面
		router.push('/login')
	}
}

// 在组件挂载后初始化背景
onMounted(() => {
	// 初始化背景
	const colorbg = new BlurGradientBg({
		dom: 'box',
		colors: ['#FC8408', '#EE340D', '#CA2406', '#46AFE0'],
		loop: true,
	})
})

// AI Chat Role logo的SVG图标
const logoImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23667eea'/%3E%3Cstop offset='100%25' stop-color='%23764ba2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='12' fill='url(%23grad)'/%3E%3C!-- AI 机器人头部 --%3E%3Ccircle cx='32' cy='28' r='16' fill='white' opacity='0.9'/%3E%3C!-- 眼睛 --%3E%3Ccircle cx='27' cy='25' r='3' fill='%23667eea'/%3E%3Ccircle cx='37' cy='25' r='3' fill='%23667eea'/%3E%3C!-- 嘴巴 --%3E%3Cpath d='M25 32 Q32 36 39 32' stroke='%23667eea' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C!-- 对话框 --%3E%3Crect x='20' y='45' width='24' height='12' rx='4' fill='white' opacity='0.8'/%3E%3Cline x1='23' y1='49' x2='41' y2='49' stroke='%23764ba2' stroke-width='1.5'/%3E%3Cline x1='23' y1='53' x2='35' y2='53' stroke='%23764ba2' stroke-width='1.5'/%3E%3C/svg%3E`


// 导航图标SVG
// 首页图标
const homeIcon = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9,22 9,12 15,12 15,22'%3E%3C/polyline%3E%3C/svg%3E`

// 聊天图标
const chatIcon = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E`

// 机器人图标
const robotIcon = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='12' cy='5' r='2'%3E%3C/circle%3E%3Cpath d='M12 7v4'%3E%3C/path%3E%3Cline x1='8' y1='16' x2='8' y2='16'%3E%3C/line%3E%3Cline x1='16' y1='16' x2='16' y2='16'%3E%3C/line%3E%3C/svg%3E`

// 用户角色图标
const userRoleIcon = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cpolyline points='17,11 19,13 23,9'%3E%3C/polyline%3E%3C/svg%3E`

// 历史记录图标
const historyIcon = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12,6 12,12 16,14'%3E%3C/polyline%3E%3C/svg%3E`

// 设置图标
const settingsIcon = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E`
</script>

<template>
	<!-- 背景容器 -->
	<div class="container">
		<!-- 背景容器 -->
		<div
			id="box"
			class="bg-container"
		></div>

		<!-- 你的其他内容 -->
		<div
			class="app-layout"
			:class="{ 'auth-layout': isAuthPage }"
		>
			<!-- 侧边栏 - 小于768px时隐藏，登录注册页面也隐藏 -->
			<aside
				v-if="!isMobile && !isAuthPage"
				class="sidebar"
				:class="{ 'sidebar--collapsed': sidebarCollapsed }"
			>
				<!-- 侧边栏头部 -->
				<div class="sidebar-header">
					<div
						class="logo"
						@click="toggleSidebar"
						:title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
					>
						<!-- 展开状态：显示图片logo + 文字 -->
						<div
							v-if="!sidebarCollapsed"
							class="logo-expanded"
						>
							<div class="logo-image">
								<img
									:src="logoImage"
									alt="AI Chat Role Logo"
								/>
							</div>
							<span class="logo-text">AI Chat Role</span>
						</div>
						<!-- 折叠状态：只显示图片logo -->
						<div
							v-else
							class="logo-collapsed"
						>
							<div class="logo-image-mini">
								<img
									:src="logoImage"
									alt="ACR"
								/>
							</div>
						</div>
					</div>
				</div>

				<!-- 导航菜单 -->
				<nav class="sidebar-nav">
					<ul class="nav-list">
						<!-- 首页 -->
						<li class="nav-item">
							<router-link
								to="/"
								class="nav-link"
								:title="sidebarCollapsed ? '首页' : ''"
							>
								<span class="nav-icon">
									<img
										:src="homeIcon"
										alt="首页"
									/>
								</span>
								<span
									v-if="!sidebarCollapsed"
									class="nav-text"
								>
									首页
								</span>
								<!-- 折叠状态下的tooltip -->
								<div
									v-if="sidebarCollapsed"
									class="nav-tooltip"
								>
									首页
								</div>
							</router-link>
						</li>
						<!-- 开始新聊天 -->
						<li class="nav-item">
							<router-link
								to="/chat"
								class="nav-link"
								:title="sidebarCollapsed ? '开始新聊天' : ''"
								exact
							>
								<span class="nav-icon">
									<img
										:src="chatIcon"
										alt="聊天"
									/>
								</span>
								<span
									v-if="!sidebarCollapsed"
									class="nav-text"
								>
									开始新聊天
								</span>
								<!-- 折叠状态下的tooltip -->
								<div
									v-if="sidebarCollapsed"
									class="nav-tooltip"
								>
									开始新聊天
								</div>
							</router-link>
						</li>
						<!-- 推荐AI -->
						<li class="nav-item">
							<router-link
								to="/bot"
								class="nav-link"
								:title="sidebarCollapsed ? '推荐AI' : ''"
							>
								<span class="nav-icon">
									<img
										:src="robotIcon"
										alt="机器人"
									/>
								</span>
								<span
									v-if="!sidebarCollapsed"
									class="nav-text"
								>
									推荐AI
								</span>
								<!-- 折叠状态下的tooltip -->
								<div
									v-if="sidebarCollapsed"
									class="nav-tooltip"
								>
									推荐AI
								</div>
							</router-link>
						</li>
						<!-- 角色管理 -->
						<li class="nav-item">
							<router-link
								to="/roles"
								class="nav-link"
								:title="sidebarCollapsed ? '角色管理' : ''"
							>
								<span class="nav-icon">
									<img
										:src="userRoleIcon"
										alt="角色"
									/>
								</span>
								<span
									v-if="!sidebarCollapsed"
									class="nav-text"
								>
									角色管理
								</span>
								<!-- 折叠状态下的tooltip -->
								<div
									v-if="sidebarCollapsed"
									class="nav-tooltip"
								>
									角色管理
								</div>
							</router-link>
						</li>
						<!-- 对话历史 -->
						<li class="nav-item">
							<router-link
								to="/history"
								class="nav-link"
								:title="sidebarCollapsed ? '对话历史' : ''"
								exact
							>
								<span class="nav-icon">
									<img
										:src="historyIcon"
										alt="历史"
									/>
								</span>
								<span
									v-if="!sidebarCollapsed"
									class="nav-text"
								>
									对话历史
								</span>
								<!-- 折叠状态下的tooltip -->
								<div
									v-if="sidebarCollapsed"
									class="nav-tooltip"
								>
									对话历史
								</div>
							</router-link>
						</li>
						<!-- 设置页面 -->
					</ul>
				</nav>

				<!-- 用户信息区域 -->
				<div class="sidebar-footer">
					<div class="user-info">
						<div
							class="user-link"
							:title="sidebarCollapsed ? (authStore.isAuthenticated ? `${authStore.username} - 在线` : '点击登录') : ''"
							@click="handleUserLinkClick"
						>
							<div class="user-avatar-container">
								<a-avatar :size="34" class="user-avatar-img">
									{{ authStore.isAuthenticated ? authStore.username.charAt(0).toUpperCase() : 'U' }}
								</a-avatar>
							</div>
							<div
								v-if="!sidebarCollapsed"
								class="user-details"
							>
								<div class="username">{{ authStore.isAuthenticated ? authStore.username : '未登录' }}</div>
								<div class="user-status">{{ authStore.isAuthenticated ? '在线' : '点击登录' }}</div>
							</div>
							<div
								v-if="!sidebarCollapsed"
								class="user-actions"
							>
								<button
									class="settings-btn"
									title="设置"
								>
									<img
										:src="settingsIcon"
										alt="设置"
									/>
								</button>
							</div>
							<!-- 折叠状态下的tooltip -->
							<div
								v-if="sidebarCollapsed"
								class="user-tooltip"
							>
								{{ authStore.isAuthenticated ? `${authStore.username} - 在线` : '点击登录' }}
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!-- 视图区域 -->
			<div
				class="content"
				:class="{ 'auth-content': isAuthPage }"
			>
				<RouterView />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	// 防止水平滚动条（但不影响宽度计算）
	overflow-x: hidden;
	// 确保容器尺寸正确
	box-sizing: border-box;
}

.bg-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -999;
	/* 确保背景在内容下方 */
}

.content {
	position: relative;
	z-index: 1;
	// 移除固定宽度，通过JavaScript动态控制
	// width: calc(100vw - 210px); // 默认展开状态宽度
	transition: width 0.3s ease; // 支持宽度动画
	/* 确保内容在背景上方 */

	/* 登录注册页面内容样式 */
	&.auth-content {
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.app-layout {
	display: flex;
	height: 100vh;
	// 防止出现水平滚动条
	overflow-x: hidden;
	width: 100%;

	/* 登录注册页面布局 */
	&.auth-layout {
		justify-content: center;
		align-items: center;
	}
}

/* 侧边栏样式 */
.sidebar {
	width: $sidebar-width;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(24px);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	color: $text-white;
	transition: width $transition-normal;
	box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15), inset -1px 0 0 rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 100;

	&--collapsed {
		width: $sidebar-collapsed-width;
	}
}

.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	min-height: 60px;
	position: relative;

	// 折叠状态下的样式调整
	.sidebar--collapsed & {
		padding: $spacing-md;
	}
}

.logo {
	transition: all $transition-normal;
	// width: 100%;
	display: flex;
	justify-content: center;
	cursor: pointer;
	border-radius: $border-radius;

	// &:hover {
	//   background-color: rgba(255, 255, 255, 0.1);
	// }
}

.logo-expanded {
	display: flex;
	align-items: center;
	gap: $spacing-md;
}

.logo-collapsed {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.logo-image {
	width: 40px;
	height: 40px;
	border-radius: $border-radius;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.logo-image-mini {
	width: 40px;
	height: 40px;
	border-radius: $border-radius;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.logo-text {
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	color: $text-white;
	white-space: nowrap;
}

/* 导航菜单样式 */
.sidebar-nav {
	flex: 1;
	padding: $spacing-lg 0;
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	margin-bottom: $spacing-xs;

	// 折叠状态下给tooltip留出空间
	.sidebar--collapsed:not(.sidebar--hovered) & {
		position: relative;
		z-index: 1;
	}
}

.nav-link {
	display: flex;
	align-items: center;
	padding: $spacing-md;
	color: $text-white;
	text-decoration: none;
	transition: all $transition-normal;
	position: relative;
	border-radius: $border-radius;
	margin: 0 $spacing-sm;

	&:hover {
		background-color: rgba(255, 255, 255, 0.1);

		// 悬停时显示tooltip
		.nav-tooltip {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
		}
	}

	&.router-link-active {
		background-color: rgba(255, 255, 255, 0.2);

		// 展开状态下的选中样式
		.sidebar:not(.sidebar--collapsed) &::before {
			content: '';
			position: absolute;
			left: -$spacing-sm;
			top: 0;
			bottom: 0;
			width: 4px;
			background-color: $text-white;
			border-radius: 0 $border-radius $border-radius 0;
		}

		// 折叠状态下的选中样式
		.sidebar--collapsed & {
			background-color: rgba(255, 255, 255, 0.3);

			&::after {
				content: '';
				position: absolute;
				right: -$spacing-sm;
				top: 50%;
				transform: translateY(-50%);
				width: 6px;
				height: 6px;
				background-color: $text-white;
				border-radius: 50%;
			}
		}
	}
}

.nav-icon {
	font-size: $font-size-lg;
	margin-right: $spacing-md;
	width: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 20px;
		height: 20px;
		object-fit: contain;
	}
}

.nav-text {
	font-size: $font-size-sm;
	white-space: nowrap;
	transition: opacity $transition-normal;
}

/* Tooltip样式 */
.nav-tooltip {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(-10px);
	background: rgba(0, 0, 0, 0.8);
	color: $text-white;
	padding: $spacing-sm $spacing-md;
	border-radius: $border-radius;
	font-size: $font-size-xs;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all $transition-fast;
	backdrop-filter: blur(4px);
}

/* 主内容区域样式 */
.main-content {
	// flex: 1;
	max-width: calc(100vw - 210px);
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
}

/* 内容区域样式 */
.content-area {
	overflow-y: auto;
	max-width: calc(100vw - 210px);
}

/* 侧边栏底部用户信息样式 */
.sidebar-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: auto;
	padding: $spacing-md;
}

.user-info {
	width: 100%;
}

.user-link {
	display: flex;
	align-items: center;
	padding: $spacing-md;
	color: #fff;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	border-radius: $border-radius;
	cursor: pointer;
	min-height: 50px; // 确保有足够的高度

	&:hover {
		background-color: rgba(255, 255, 255, 0.1);

		// 悬停时显示tooltip
		.user-tooltip {
			opacity: 1;
			visibility: visible;
			transform: translateY(-50%) translateX(0);
		}
	}

	// 折叠状态下的特殊样式
	.sidebar--collapsed & {
		justify-content: center;
		padding: $spacing-md $spacing-sm;

		.user-avatar-container {
			margin-right: 0;
		}
	}
}

.user-avatar-container {
	width: 34px;
	height: 34px;
	margin-right: $spacing-md;
	flex-shrink: 0;
}

.user-avatar-img {
	// Avatar组件会自己处理圆形样式，这里只需要确保尺寸正确
}

.user-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.username {
	font-size: $font-size-sm;
	font-weight: $font-weight-medium;
	color: $text-white;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.user-status {
	font-size: $font-size-xs;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.user-actions {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.settings-btn {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: $spacing-xs;
	border-radius: $border-radius-sm;
	transition: all $transition-normal;
	font-size: $font-size-sm;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 16px;
		height: 16px;
		object-fit: contain;
	}

	&:hover {
		color: $text-white;
		background-color: rgba(255, 255, 255, 0.1);
	}
}

/* 用户信息Tooltip样式 */
.user-tooltip {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(-10px);
	background: rgba(0, 0, 0, 0.85);
	color: $text-white;
	padding: $spacing-sm $spacing-md;
	border-radius: $border-radius;
	font-size: $font-size-xs;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all $transition-fast;
	z-index: $z-tooltip;
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	max-width: 180px;
	word-wrap: break-word;

	// 为侧边栏收起状态特别优化
	.sidebar--collapsed & {
		// 在收起状态下，显示在右侧，确保不超出边界
		left: calc(100% + 8px);
		top: 50%;
		transform: translateY(-50%) translateX(0);

		// 修正箭头样式
		&::before {
			left: -4px;
			top: 50%;
			transform: translateY(-50%);
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: rgba(0, 0, 0, 0.85);
			border-bottom-color: transparent;
		}
	}

	// 箭头
	&::before {
		content: '';
		position: absolute;
		left: -4px;
		top: 50%;
		transform: translateY(-50%);
		border: 4px solid transparent;
		border-right-color: rgba(0, 0, 0, 0.85);
	}
}

/* 响应式设计 */
@media (max-width: $breakpoint-mobile) {
	.sidebar {
		position: fixed;
		left: -$sidebar-width;
		top: 0;
		bottom: 0;
		z-index: $z-modal;
		transition: left $transition-normal;

		&--collapsed {
			left: -$sidebar-collapsed-width;
		}
	}

	.main-content {
		margin-left: 0;
	}

	// 移动端content容器占满全宽
	.content {
		width: 100% !important;
		max-width: 100% !important;
	}

	.page-title {
		font-size: $font-size-xl;
	}

	// 移动端用户信息区域优化
	.sidebar-footer {
		padding: $spacing-sm;
	}

	.user-link {
		padding: $spacing-sm;
		min-height: 44px; // 移动端触摸友好的最小高度
	}

	.user-avatar-container {
		width: 32px;
		height: 32px;
	}

	.username {
		font-size: $font-size-xs;
	}

	.user-status {
		font-size: 10px;
	}

	// 移动端不显示tooltip
	.user-tooltip,
	.nav-tooltip {
		display: none;
	}
}
</style>
